<template>
  <div>
    <div class="flex flex-col gap-4 text-nowrap">
      <div v-if="currentShape.type !== 'd-qrcode'" class="flex justify-between" fill>
        <div class="w-[32px]">{{ t('文字') }}</div>
        <a-input v-model:value="currentShape.text" @change="changeText" class="w-fit"></a-input>
      </div>
      <div class="flex justify-between" fill>
        <div class="w-[32px]">{{ t('大小') }}</div>
        <a-input-number v-model:value="currentShape.size" style="width: 120px"></a-input-number>
      </div>
      <div class="flex justify-between" fill>
        <div class="w-[32px]">{{ t('背景颜色') }}</div>
        <color-picker v-model="currentShape.bgcolor" @change="setbackgroundColor"></color-picker>
      </div>
      <div class="flex justify-between" fill>
        <div class="w-[32px]">{{ t('线条颜色') }}</div>
        <color-picker v-model="currentShape.textColor" @change="setLineColor"></color-picker>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { previewQrCode } from '@/api/modules/utils/utils';
import { currentShape } from '../../../data/shapes';

const { t } = useI18n();
const preview = async () => {
  return previewQrCode({
    text: currentShape.value.text,
    /* 二维码的大小 */
    size: currentShape.value.size,
    bgcolor: currentShape.value.bgcolor,
    textColor: currentShape.value.textColor,
    margin: 0,
  });
};
const setbackgroundColor = async (color: any) => {
  currentShape.value.bgcolor = color;
  const qrimage = await preview();
  currentShape.value.src = qrimage.data;
};

const setLineColor = async (color: any) => {
  currentShape.value.textColor = color;
  const { data } = await preview();
  currentShape.value.src = data.data;
};
const changeText = async () => {
  const { data } = await preview();
  currentShape.value.src = data.data;
};

watch(
  currentShape,
  () => {
    const { type, w, h } = currentShape.value;
    if (type === 'd-qrcode' || type === 'qrcode') {
      currentShape.value.size = (w + h) / 2;
    }
  },
  {
    immediate: true,
    deep: true,
  },
);
</script>

<style lang="scss" scoped>
.qrcode-text {
  input {
    border: 1px solid #eee;
    text-align: center;
    line-height: 24px;
    width: 100px;
    padding: 0;
  }
}
</style>
